<template>
  <el-dialog
    :title="title"
    :visible.sync="openSheet"
    width="500px"
    :destroy-on-close="true"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item :label="$t('parameterCode')">
        <el-input
          v-model="form.code"
          disabled
        />
      </el-form-item>
      <el-form-item
        :label="$t('parameterContent')"
        prop="content"
      >
        <el-input
          v-model="form.content"
          disabled
        />
      </el-form-item>
      <el-form-item
        :label="$t('parameterValue')"
        prop="value"
      >
        <el-input
          v-model="form.value"
          maxlength="128"
          show-word-limit
          :placeholder="$t('inputParameterValue')"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">{{
        $t('update')
      }}</el-button>
      <el-button @click="cancel">{{ $t('cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  updateSystemParameterListApi
} from '@/views/system/api/system.api';
export default {
  data() {
    return {
      title: this.$t('parameterUpdate'),
      openSheet: false,
      parameterId: undefined,
      form: {
        code: undefined,
        content: undefined,
        value: undefined
      },
      rules: {
        value: [
          {
            required: true,
            message: this.$t('parameterContentRequire'),
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    async openSheetDialog(data) {
      this.openSheet = !this.openSheet;
      this.parameterId = data.id;
      this.form = data;
    },
    cancel() {
      this.openSheet = !this.openSheet;
    },
    submitForm: function() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          var resp = await updateSystemParameterListApi(this.parameterId, this.form);
          if (resp.success) {
            this.$emit('refreshList');
            this.cancel();
            this.targaMessage(
              this.$t('updateSuccess', {
                title: this.$t('parameterCode'),
                value: this.form.code
              })
            );
          } else {
            this.targaMessageBox(this, resp.msg)
          }
        }
      });
    }
  }
};
</script>

<style></style>
